<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>尤迈桃李会</title>
    <script src="js/rem.js"></script>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.min.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/ot-classroom-play.css">
    <link rel="stylesheet" href="css/ot-classroom-index.css">
    <link rel="stylesheet" href="css/ot-doctor-detail.css">
    <script>(function () { var _53code = document.createElement("script"); _53code.src = "https://tb.53kf.com/code/code/96d8f960b261e49515450f8953b044bc5/1"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s); })();</script>
</head>

<body>
    <div class="pub_bar" left="back" transparent="true"></div>
    <!--  -->
    <div class="pub-container has-tabbar bgwhite">
        <div class="ot-video" data-videoId="" playdom="players" stopScreen="true" monitor="true">
            <img src="" alt="">
            <i class="pub-i-play"></i>
            <div id="players"></div>
        </div>
        <!--  -->
        <div class="hxl_tabs">
            <div class="tabs_item active">目录</div>
            <div class="tabs_item">简介</div>
            <div class="tabs_item">相关课程</div>
        </div>
        <!--  -->
        <div class="relevant_listing">
            <!-- 目录 -->
            <div class="relevant_list bgwhite" style="display: block;">
                <div class="tabs_text">
                </div>
                <a href="./ot-classroom-buyCard.html">
                    <div class="tabs_card plr15">
                        <p>领取学生证 畅学全网课程</p>
                    </div>
                </a>
                <div class="tabs_buy">
                </div>
                <div class="tabs_live space-border">
                </div>
                <div class="tabs_menu">
                    <div class="tabs_menu_top">
                        <div class="tabs_menu_name">目录</div>
                        <div>
                            <img class="menu" src="./image/hxl/hxl-doctor23.png" alt="">
                            <img class="note" src="./image/hxl/hxl-doctor14.png" alt="">
                            <img class="pdf" src="./image/hxl/hxl-doctor15.png" alt="">
                        </div>
                    </div>
                    <div class="menu_cont">
                    </div>
                    <div class="note_cont"></div>
                    <div class="ppt_cont" id="ppt_cont"></div>
                </div>
            </div>
            <!-- 简介 -->
            <div class="relevant_list bgwhite">
                <div class="tabs_text">
                </div>
            </div>
            <!-- 相关课程 -->
            <div class="relevant_list bgwhite">
                <div class="hot-course">
                    <!--  -->
                    <ul class="list">
                    </ul>
                </div>
            </div>
        </div>
        <!-- 评论 -->
        <div class="comment_cont">
            <div class="comment_title">
                <p><span>0</span>条评论</p>
                <img class="comment_close" src="./image/bar-close.png" alt="">
            </div>
            <div class="comment_listing">
                <div class="comment_list">
                </div>
                <div class="weui-loadmore loadMore">
                    <i class="weui-loading"></i>
                    <span class="weui-loadmore__tips">正在加载</span>
                </div>
                <div class="weui-loadmore weui-loadmore_line noMore hide">
                    <span class="weui-loadmore__tips">没有更多数据了</span>
                </div>
            </div>
            <div class="mycomment">
                <div class="mycomment_cont">
                    <div class="mycomment_head"><img src="" alt=""></div>
                    <div class="mycomment_msg"><input id="mycomment_msg" type="text" placeholder="请输入评论……"></div>
                </div>
                <div class="mycomment_send">发送</div>
            </div>
        </div>
    </div>
    <script type="text/template" id="endPreviewTemplate">
        <div class="players_tip_cont">您的观看时长已结束，购买课程后可完整观看！</div>
      </script>
    <script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.3/aliplayer-h5-min.js"></script>
    <script src="js/aliplayercomponents-1.0.5.min.js"></script>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-weui.min.js"></script>
    <script type="text/javascript" src="js/md5.js"></script>
    <script type="text/javascript" src="js/public.js"></script>
    <script>
        let courseId = getQueryString('courseId') // 课程id
        let fixed = getQueryString('fixed') // 对应续播的节id
        let price // 节 价格
        let series // 目录
        let learn // 播放进度
        let seriesId
        let page = 0
        let course // 课程信息
        let seriesName
        let seriesNum
        let orderImg

        let isBuy = false // true已购买 false未购买
        if (isBuy) {
            $('.tabs_card').hide()
            $('.tabs_buy').hide()
        }

        $(document).on('click', '.tabs_item', function () {
            let index = $(this).index()
            $(this).addClass('active').siblings().removeClass("active")
            $(this).parent().next('.relevant_listing').find('.relevant_list').eq(index).show().siblings().hide()

            if (status == 1) {
                $('.tabs_p3').removeClass('text-cut-three')
            } else {
                $('.tabs_p3').addClass('text-cut-three')
            }
        })

        $(document).on('click', '.tabs_menu_head', function () {
            $(this).toggleClass('active').next('.tabs_menu_list').slideToggle()
        })

        $(document).on('click', '.menu', function () {
            $(".tabs_menu_name").html('目录')
            $(".menu_cont").show()
            $('.note_cont').hide()
            $('.ppt_cont').hide()
        })

        $(document).on('click', '.note', function () {
            $(".tabs_menu_name").html('笔记')
            $(".menu_cont").hide()
            $('.note_cont').show()
            $('.ppt_cont').hide()
        })

        $(document).on('click', '.pdf', function () {
            $(".tabs_menu_name").html('PDF')
            $(".menu_cont").hide()
            $('.note_cont').hide()
            $('.ppt_cont').show()
        })

        getCourse()
        function getCourse() {
            gethttp('/ld/course', {
                loading: true,
                data: {
                    type: 'c',
                    user: getCookie('userId'),
                    id: courseId
                },
                success: function (res) {
                    console.log(res)
                    course = res.data.course
                    learn = res.data.learn
                    trialSecond = course.trialSecond
                    // 目录
                    series = res.data.course.series
                    // 相关课程
                    let list = res.data.relevantCourses.tag.list
                    let arr = []
                    //  默认第一节第一讲的价格
                    let seriesPaid = ''
                    if (series.length > 0) {
                        price = series[0].sellingPrice
                        seriesPaid = series[0].paid
                    }

                    // 封面
                    $(".ot-video img").attr('src', course.thumbnailUrlUi)
                    orderImg = course.thumbnailUrlUi

                    // 信息
                    $('.tabs_text').html(`<p class="tabs_p1">${course.doctorName}医生：${course.name}</p>
                                    <p class="tabs_p2">${course.learnCountUi}人正在学习｜${course.playCountUi}播放｜${course.createdAtUi}上线</p>
                                    <p class="tabs_p2">${course.labels}</p>
                                    <div class="tabs_p3 text-cut-three">专家介绍：${course.doctorDesciption}</div>
                                    <p class="tabs_p3 text-cut-three">课程介绍：${course.desciption}</p>`)

                    // 评论、点赞
                    $(".tabs_live").html(`<div class="tabs_live_item comment">
                                            <p>${course.commentCountUi}</p>
                                        </div>
                                        <div class="tabs_live_item thumb ${course.like ? 'active' : ''}">
                                            <p>${course.likeCountUi}</p>
                                        </div>`)

                    $('.tabs_buy').html(`<div class="tabs_buy_item hot active all_price">
                                            <a href="javascript:;">
                                                <p class="tabs_buy_title">购买课程全集</p>
                                                <p class="tabs_buy_price">￥<span>${course.sellingPrice}</span></p>
                                            </a>
                                        </div>
                                        <div class="tabs_buy_item serise_price">
                                            <a href="javascript:;">
                                                <p class="tabs_buy_title">购买单讲课</p>
                                                <p class="tabs_buy_price">￥<span>${price}</span></p>
                                            </a>
                                        </div>`)

                    // 课程免费
                    if (course.free) {
                        // $(".tabs_buy_item").hide()
                        $(".tabs_buy_item").attr('no', '1')
                    } else {
                        // 是否购买了全集
                        if (course.paid) {
                            // $('.all_price').hide()
                            $(".all_price").attr('no', '1')
                        }

                        // 是否购买了单讲
                        if (seriesPaid) {
                            // $(".serise_price").hide()
                            $(".serise_price").attr('no', '1')
                        }
                    }

                    console.log(series)
                    // 笔记
                    $('.note_cont').html(series[0].lessons[0].html)
                    // pdf
                    $('.ppt_cont').html(`<iframe src="./web/viewer.html?file=${series[0].lessons[0].pptUrlUi}" frameborder="0"></iframe>`)

                    series.forEach((item, index) => {
                        $('.menu_cont').append(`<div class="tabs_menu_head">
                                                    <p>第${index + 1}节：${item.name}</p>
                                                    <img src="./image/hxl/hxl-bottom.png" alt="">
                                                </div>
                                                <div class="tabs_menu_list">
                                                    <div class="tabs_menu_item tabs_menu_videos"></div>
                                                </div>`)



                        item.lessons.forEach((items, indexs) => {
                            if (items.videos.length > 0) {
                                items.videos.forEach((itemss, indexss) => {
                                    $('.tabs_menu_list').eq(index).find('.tabs_menu_videos').append(`<a href="./ot-doctor-video.html?doctor=${itemss.doctor}&course=${itemss.course}">${itemss.name ? itemss.name : '短视频'}</a> <span>|</span> `)
                                })
                            } else {
                                $('.tabs_menu_list').eq(index).find('.tabs_menu_videos').hide()
                            }

                            $('.tabs_menu_list').eq(index).append(`<div class="tabs_menu_item tabs_menu_lessons ${fixed == items.id ? 'active' : indexs == 0 && index == 0 ? 'active' : ''}" data-parentIndex="${index}" data-index="${indexs}" data-id="${items.id}">
                                                                        <p class="tabs_menu_title">${items.name}</p>
                                                                        <p class="tabs_menu_time">${items.durationUi}<span></span></p>
                                                                    </div>`)
                        })

                        // 触发点击 续播
                        for (let j in $('.tabs_menu_lessons')) {
                            if ($('.tabs_menu_lessons').eq(j).attr('data-id') == fixed) {
                                $('.tabs_menu_lessons').eq(j).trigger('click')
                                console.log($('.tabs_menu_lessons').eq(j))
                            }
                        }
                    })

                    list.forEach((item, index) => {
                        let html = `<li class="list_item space-border">
                                        <a href="./ot-classroom-play.html?doctor=${item.doctor}?courseId=${item.id}">
                                            <div class="hot_center">
                                                <div class="hot_left">
                                                    <img class="hot_img" src="${item.coverUrlUi}" alt="">
                                                    <div class="hot_p2">${item.doctorName} 专家</div>
                                                </div>
                                                <div class="hot_right">
                                                    <div class="hot_p3 text-cut-one">${item.name}</div>
                                                    <div class="hot_p4">${item.doctorName}&emsp;${item.doctorCompetentName}</div>
                                                    <div class="hot_p4">${item.doctorHospitalName}&emsp;${item.depart2Name}</div>
                                                    <div class="hot_p5">${item.labels}</div>
                                                </div>
                                            </div> 
                                        </a>
                                    </li>`
                        arr.push(html)
                    });
                    $('.list').append(arr)

                    $('.tabs_menu_head').eq(0).trigger('click')
                    $('.tabs_menu_list').eq(0).find('.tabs_menu_lessons').eq(0).find('span').html(' | 正在播放')

                    switchVideo()
                }
            })
        }

        function switchVideo(index1, index2) {
            let parentIndex = index1 ? index1 : 0
            let index = index2 ? index2 : 0
            console.log(parentIndex, index)


            if (series.length > 0) {
                if (series[parentIndex].lessons.length > 0) {
                    let alyVideoId = series[parentIndex].lessons[index].alyVideoId
                    let coverUrl = series[parentIndex].lessons[index].coverUrl
                    let lessonId = series[parentIndex].lessons[index].id

                    seriesName = series[parentIndex].name
                    seriesNum = series[parentIndex].lessons.length

                    // 续播 对应当前节
                    if (learn && learn.lesson == lessonId) {
                        playedPercent = learn.duration * learn.playedPercent
                    } else {
                        playedPercent = 0
                    }
                    let sellingPrice = series[parentIndex].sellingPrice
                    // 单系列id
                    seriesId = series[parentIndex].id
                    // '讲'是否免费 true免费  false付费
                    seriesFree = series[parentIndex].free
                    // '讲'是否购买过
                    coursePaid = series[parentIndex].paid
                    if (!seriesFree) {
                        series[parentIndex].paid ? $('.serise_price').hide() : $('.serise_price').show()
                    }
                    // 笔记
                    $('.note_cont').html(series[parentIndex].lessons[index].html ? series[parentIndex].lessons[index].html : '<p class="t-c">暂无笔记内容</p>')
                    // pdf
                    let pdfSrc = series[parentIndex].lessons[index].pptUrlUi
                    if (pdfSrc) {
                        $('.ppt_cont').html(`<iframe src="./web/viewer.html?file=${series[parentIndex].lessons[index].pptUrlUi}" frameborder="0"></iframe>`)
                    } else {
                        $('.ppt_cont').html('<p class="t-c">暂无PDF内容</p>')
                    }

                    $(".ot-video").attr('data-videoid', alyVideoId)
                    $(".ot-video").attr('lessonId', lessonId)
                    // $(".ot-video img").attr('src', coverUrl)
                    if (!seriesFree) {
                        $(".serise_price").show()
                        $('.serise_price span').html(sellingPrice)
                    }
                }
            }

            parentIndex ? initAly() : ''
        }

        // 重置点播
        function initAly() {
            $('#players').remove()
            $('.ot-video').append('<div id="players"></div>')
        }

        $(document).on('click', '.tabs_menu_lessons', function () {
            let parentIndex = $(this).attr('data-parentIndex')
            let index = $(this).attr('data-index')

            $(this).addClass('active').siblings('.tabs_menu_lessons').removeClass('active')
            $('.tabs_menu_time span').html('')
            $(this).find('.tabs_menu_time span').html(' | 正在播放')

            switchVideo(parentIndex, index)
        })

        // 获取留言
        getComment()
        function getComment(type) {
            if (type) {
                loading = false
            }
            $(".loadMore").removeClass('hide')
            gethttp('/lt/course_comment', {
                data: {
                    type: 'c',
                    user: getCookie('userId'),
                    course: courseId
                },
                success: function (res) {
                    let list = res.data.list
                    let arr = []
                    // 评论数量
                    $('.comment_title span').html(res.data.allCount)

                    list.forEach((item, index) => {
                        let html = `<div class="comment_item">
                                        <div class="comment_head"><img src="${item.userHeadImageUrl ? item.userHeadImageUrl : avatar}" alt=""></div>
                                        <div class="comment_text">
                                            <p class="comment_name text-cut-one">${item.userName ? item.userName : '用户名称'}</p>
                                            <p class="comment_msg">${item.comment}</p>
                                        </div>
                                        <div class="comment_live ${item.like ? 'active' : ''}" data-id="${item.id}">${item.likeCount}</div>
                                    </div>`
                        arr.push(html)
                    });

                    page == 0 ? $('.comment_list').html(arr) : $('.comment_list').append(arr)
                    if (list.length < 10) {
                        $(".noMore").removeClass('hide')
                        loading = true;
                    } else {
                        loading = false;
                    }
                    $(".loadMore").addClass('hide')
                }
            })
        }


        // 评论点赞
        $(document).on('click', '.comment_live', function () {
            let that = $(this)
            let comment = $(this).attr('data-id')
            posthttp('/course_comment_like', {
                hasToken: true,
                data: {
                    type: 'c',
                    user: getCookie('userId'),
                    comment: comment,
                },
                success: function (res) {
                    let likeCount = res.data.likeCount
                    if (res.data.like) {
                        that.addClass('active')
                    } else {
                        that.removeClass('active')
                    }
                    that.html(likeCount)
                }
            })
        })

        // 课程点赞
        $(document).on('click', '.thumb', function () {
            let that = $(this)
            posthttp('/course_like', {
                hasToken: true,
                data: {
                    type: 'c',
                    user: getCookie('userId'),
                    course: courseId,
                },
                success: function (res) {
                    let likeCount = res.data.likeCount
                    if (res.data.like) {
                        that.addClass('active')
                    } else {
                        that.removeClass('active')
                    }
                    that.find('p').html(likeCount)
                }
            })
        })

        // 初始化加载更多
        var loading = false
        $('.comment_listing').infinite().on("infinite", function () {
            if (loading) return;
            loading = true;
            page = Number(page) + 1
            getComment()
        });

        // 发送评论
        $(document).on('click', '.mycomment_send', function () {
            let val = $('#mycomment_msg').val()
            console.log(val)
            if (!val) {
                toast("请输入内容");
                return false
            }
            posthttp('/course_comment', {
                hasToken: true,
                data: {
                    type: 'c',
                    user: getCookie('userId'),
                    comment: val,
                    course: courseId
                },
                success: function (res) {
                    if (res.code == '01') {
                        toast("评论成功");
                        $('#mycomment_msg').val('')
                        page = 0
                        loading = false
                        getComment()
                    }
                }
            })
        })

        // 购买课程 全集
        $(document).on('click', '.all_price', function () {
            if($(this).attr('no')){
                toast("免费课程");
                return false
            }
            let orderName = $('.tabs_p1').html()
            let orderNum = course.serieCount
            let orderPrice = $(this).find('.tabs_buy_price span').html()
            location.href = `ot-classroom-buyClassroom.html?course=${courseId}&orderName=${orderName}&orderNum=${orderNum}&orderPrice=${orderPrice}&orderImg=${orderImg}`
        })
        // 单讲
        $(document).on('click', '.serise_price', function () {
            if($(this).attr('no')){
                toast("免费节");
                return false
            }
            let orderName = seriesName
            let orderNum = seriesNum
            let orderPrice = $(this).find('.tabs_buy_price span').html()
            location.href = `ot-classroom-buyClassroom.html?serie=${seriesId}&orderName=${orderName}&orderNum=${orderNum}&orderPrice=${orderPrice}&orderImg=${orderImg}`
        })

        // window.open('./web/viewer.html?file=https://nqct.ip58.lhyw.net/youmai/1.pdf')
    </script>
</body>

</html>